import { FC, useState } from "react"
import { useNavigate, useLocation } from "react-router-dom"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import { CloseOutline } from 'antd-mobile-icons'
import logo from '@/assets/images/index/logo.png'
import menu from '@/assets/images/header/header-menu.png'
import shui from '@/assets/images/header/shui.png'
import sui from '@/assets/images/header/sui.png'
import user from '@/assets/images/header/user.png'
import transaction from '@/assets/images/header/transaction.png'
import space from '@/assets/images/header/space.png'
import assets from '@/assets/images/header/assets.png'
import nft from '@/assets/images/header/nft.png'
import game_fi from '@/assets/images/header/game-fi.png'
import switchd from '@/assets/images/header/switch.png'
import arrow from '@/assets/images/header/arrow.png'
import "./index.scss"

interface IHeader {}

const Header: FC<IHeader> = () => {
	
	const { t, i18n } = useTranslation()
	const navigate = useNavigate()
	const { pathname } = useLocation()
    const [show, setShow] = useState(true)

	
	return (
		<div>
			<div id='header'>
				<div className="header-holder" />
				<div className="container flex-between">
					<div className="logo" onClick={() => navigate('/index')} >
						<img className="logo-img" src={logo} alt="" />
					</div>
                    <div className="menu">
                        {
                            show ? 
                            <img className="menu-img" onClick={() => setShow(false)} src={menu} alt="" />
                            : <CloseOutline fontSize={16} className="close-btn" onClick={() => setShow(true)} />
                        }
                    </div>
				</div>
                <div onClick={() => setShow(true)} className={`nav-mask ${show ? '' : 'active'}`}></div>
                <div className={`header-nav ${show ? '' : 'active'}`}>
                    <ul className="nav-list">
                        <li onClick={() => navigate('/index')} className={[pathname === '/index' && 'active'].filter(Boolean).join(' ')}>{t('header.home')}</li>
                        <li onClick={() => navigate('/market')} className={[pathname === '/market' && 'active'].filter(Boolean).join(' ')}>{t('header.market')}</li>
                        <li onClick={() => navigate('/game')} className={[pathname === '/game' && 'active'].filter(Boolean).join(' ')}>{t('header.game')}</li>
                        <li onClick={() => navigate('/task')} className={[pathname === '/task' && 'active'].filter(Boolean).join(' ')}>{t('header.task')}</li>
                        <li onClick={() => navigate('/swap')} className={[pathname === '/swap' && 'active'].filter(Boolean).join(' ')}>{t('header.swap')}</li>
                        <li onClick={() => navigate('/white-paper')} className={[pathname === '/white-paper' && 'active'].filter(Boolean).join(' ')}>{t('header.whitepaper')}</li>
                    </ul>
                    <div className="connect">{t('header.connect')}</div>
                    <div className="connect-dropdown">
                        <ul className="dropdown-top-list">
                            <li>
                                <img src={shui} alt="" />
                                <p className="top-list-value">40,777.208</p>
                                <span>SHUI</span>
                            </li>
                            <li>
                                <img src={sui} alt="" />
                                <p className="top-list-value">88.11</p>
                                <span>SUI</span>
                            </li>
                        </ul>
                        <ul className="dropdown-middle-list">
                            <li>
                                <img className="left-icon" src={user} alt="" />
                                <p className="middle-list-value">{t('header.userInfo')}</p>
                                <img className="right-icon" src={arrow} alt="" />
                            </li>
                            <li onClick={() => navigate('/my-sale')}>
                                <img className="left-icon" src={transaction} alt="" />
                                <p className="middle-list-value">{t('header.transaction')}</p>
                                <img className="right-icon" src={arrow} alt="" />
                            </li>
                            <li>
                                <img className="left-icon" src={space} alt="" />
                                <p className="middle-list-value">{t('header.space')}</p>
                                <img className="right-icon" src={arrow} alt="" />
                            </li>
                            <li onClick={() => navigate('/my-assets')}>
                                <img className="left-icon" src={assets} alt="" />
                                <p className="middle-list-value">{t('header.assets')}</p>
                                <img className="right-icon" src={arrow} alt="" />
                            </li>
                        </ul>
                        <ul className="dropdown-middle-list">
                            <li>
                                <img className="left-icon" src={nft} alt="" />
                                <p className="middle-list-value">{t('header.equity')}</p>
                                <img className="right-icon" src={arrow} alt="" />
                            </li>
                            <li>
                                <img className="left-icon" src={game_fi} alt="" />
                                <p className="middle-list-value">{t('header.gameFi')}</p>
                                <img className="right-icon" src={arrow} alt="" />
                            </li>
                        </ul>
                        <ul className="dropdown-middle-list">
                            <li>
                                <img className="left-icon" src={switchd} alt="" />
                                <p className="middle-list-value">{t('header.switch')}</p>
                                <img className="right-icon" src={arrow} alt="" />
                            </li>
                        </ul>
                    </div>
                    <div className="page-lang flex-center">
                        <span onClick={() => i18n.changeLanguage('zh_CN')} className={i18n.language === 'zh_CN' ? 'active' : ''}>中文</span>
                        <span className="line"></span>
                        <span onClick={() => i18n.changeLanguage('en_GB')} className={i18n.language === 'en_GB' ? 'active' : ''}>EN</span>
                    </div>
                </div>
			</div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(Header)